<%@ page contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html xmlns:ng="http://angularjs.org">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>KanbanTweet</title>
    <link href='http://fonts.googleapis.com/css?family=Inconsolata|Reenie+Beanie' rel='stylesheet' type='text/css'>
    <style type="text/css">
    
body {
	width: 980px;	
	margin: 21px auto;
	font-family: Arial, serif;
	font-size: small;		
}

center {
	width: 980px;
	text-align: left;
}

h1.header {
	float: left;
	margin: 0px;
	padding: 0px;
	font-family: Inconsolata, serif;
	margin-bottom: 21px;	
}

h1.header a {
	text-decoration: none;
	color: #000;
	font-weight: normal;
}

span.handy {
	font-family: Reenie Beanie;
	font-weight: normal;
	margin-left: 13px;
	padding: 0px;
	visibility: hidden;	
}




h1:hover span.handy, div#tweets div:hover span.handy {
	visibility: visible;
}

h2 {
	margin: 0px;
	padding: 0px;
	font-family: Inconsolata, serif;
	font-weight: normal;		
}

ul.header {
	float: right;
	margin: 0px;
	margin-top: 8px;
	padding: 0px;
	font-weight: bold;		
}

ul.header li {
	list-style: none;
	float: left;
	padding: 0 0 0 20px;	 	
}

ul.header li a {
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	color: #00f;
}

#wrapper {
	clear: both;
	border-top: 1px solid blue;
	width: 980px;
	padding-top: 21px;
}

#tweets {
	float: left;
	width: 68%;
	margin-right: 2%;
}

#sidebar {
	float: left;
	width: 30%;			
}

#sidebar ul {
	list-style: none;
				
}

#sidebar ul li {
	padding-bottom: 13px;
	
}

#sidebar ul li a {
	text-decoration: none;
	color: blue;
	font-size: 90%;
	margin-left: 13px;	
	padding: 5px;		
}

#sidebar ul li a:hover {
	background: #ffc940;
}

#sidebar ul li a.selected {
	font-weight: bold;
	
}

#sidebar ul li.idealoop  {
	margin-left: 23px;
	font-size: 110%;
	color: gray;	
}
label {
	color: gray;
	font-size: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
}

textarea {
	margin-top: 13px;
	margin-bottom: 13px;
	width: 100%;
	height: 55px;	
}

button {
	float: right;
	
}

#tweets form {
	padding-bottom: 21px;
}

.tweet {
	margin-top: 13px;
	padding-top: 8px;
	border-top: 1px solid #ddd;
	width: 100%;	
	word-wrap: break-word;
}

.tweet a.user {
	color: blue;
	font-family: Arial;
	font-weight: bold;
	text-decoration: none;
	margin-right: 13px;
}

.tweet span {
	font-family: Arial;
	font-size: 110%;
	color: gray;
	padding-top: 8px;
	display: inline;
	height: 34px;
}

.tweet span.time {
	font-family: Arial;
	font-size: 89%;
	color: gray;
	padding-top: 8px;
	display: block;
	height: 34px;
}

.tweet div {
	font-size: 130%;
	float: right; 
}

.tweet div a {
	text-decoration: none;
	color: #ccc;	
}


.tweet div a:hover {
	color: green;
}

.tweet div a.del:hover {
	color: red;
}

#footer {
	clear: both;
	width: 100%;
	font-size: small;
	padding-top: 21px;
	text-align: center;
	font-family: Inconsolata, serif;
}

#footer a {
	text-decoration: none;
	
}

    </style>
    
    
    
    
  <script src="http://code.angularjs.org/angular-0.9.13.min.js" ng:autobind></script>
  </head>

  <body>
  	
  	<center>
  	<h1 class="header"><a href="/">KanbanTweet</a><span class="handy">(concept)</span></h1>
  	
  	<ul class="header">
		<li>${requestScope.user.email}</li>		
		<li><a href="/logOut">Log out</a></li>
	</ul>
  		
  	<div id="wrapper">
  	
		<div id="tweets">
		
		<div>
		<label>Input:</label>
		
  		<form action="/kanbantweet" method="post">
  		<textarea id="kanban" name="kanban" ng:change="total = 140 - kanban.length"></textarea>
		<span class="handy" ng:style="{visibility: 'visible'}" style="font-size: 21pt; color:#000" ng:init="total=140">{{total}} characters</span>
		<button type="submit" ng:show="total >= 0 && total < 140">Send</button>
		</form>
		
		</div>
		
  
		<h2>
		<c:choose>
			<c:when test="${buffer == 'inputqueue'}">
     			Input
     		</c:when>
     		<c:when test="${buffer == 'nottodo'}">
     			Not To-Do
     		</c:when>
     		<c:when test="${buffer == 'investigate'}">
     			Investigate
     		</c:when>
     		<c:when test="${buffer == 'design'}">
     			Design
     		</c:when>
     		<c:when test="${buffer == 'experiment'}">
     			Experiment
     		</c:when>
     		<c:when test="${buffer == 'adjust'}">
     			Adjust
     		</c:when>     		
     		<c:otherwise>
         		Output
     		</c:otherwise>
 		</c:choose>
		</h2>
		
		<c:if test="${empty tweets}">
			<div class="tweet">
				Empty queue.
			</div>
		</c:if>
		
		<c:forEach items="${tweets}" varStatus="index">
			
			<div ng:class="'tweet'">
				<a class="user" href="/kanbantweet">${tweets[index.count-1].owner}</a> {{'${tweets[index.count-1].tweet}' | linky}}
				
				<c:url var="previousUrl" value="/previousBuffer" >
    				<c:param name="kanbanId" value="${tweets[index.count-1].id}" />    				
				</c:url>
				
				<c:url var="nextUrl" value="/nextBuffer" >
    				<c:param name="kanbanId" value="${tweets[index.count-1].id}" />
				</c:url>
				
				<c:url var="notToDoUrl" value="/notToDoBuffer" >
    				<c:param name="kanbanId" value="${tweets[index.count-1].id}" />
				</c:url>
				
				<c:if test="${tweets[index.count-1].buffer != 'nottodo'}">
					<div>
					
						
					
					<c:if test="${tweets[index.count-1].buffer != 'inputqueue' && tweets[index.count-1].buffer != 'outputqueue'}">
					&nbsp;&middot;&nbsp;<a href="${previousUrl}" title="previous buffer">&laquo;</a>
					</c:if>
					
					<c:if test="${tweets[index.count-1].buffer != 'outputqueue'}">
					&nbsp;&middot;&nbsp;<a href="${nextUrl}" title="next buffer">&raquo;</a>&nbsp;&middot;&nbsp;<a class="del" href="${notToDoUrl}" title="not to-do">&#10006;</a>
					</c:if>
					
										
					</div>
				</c:if>
				
				<span class="time">
				<c:if test="${tweets[index.count-1].doneDate == null}">
				${tweets[index.count-1].elapsedTime}
				</c:if>
				<c:if test="${tweets[index.count-1].doneDate != null}">
				${tweets[index.count-1].cycleTime}
				</c:if>
				</span>			
			</div>
			
		</c:forEach>
		
			  		
  		</div>
  		
  		<div id="sidebar">
  		
  			<ul>
  				<!-- li><h2>Buffers</h2></li -->
  				<li><a class="<c:if test='${buffer == "inputqueue"}'>selected</c:if>" href="/kanbantweet?buffer=inputqueue">Input&nbsp;<span dojoType="dijit.layout.ContentPane" href="/bufferSize?buffer=inputqueue" loadingMessage="Loading..."></span></a></li>
  				  				
					<li class="idealoop">&darr;<a class="<c:if test='${buffer == "investigate"}'>selected</c:if>" href="/kanbantweet?buffer=investigate">Investigate&nbsp;<span dojoType="dijit.layout.ContentPane" href="/bufferSize?buffer=investigate" loadingMessage="Loading..."></span></a></li>
					<li class="idealoop">&darr;<a class="<c:if test='${buffer == "design"}'>selected</c:if>" href="/kanbantweet?buffer=design">Design&nbsp;<span dojoType="dijit.layout.ContentPane" href="/bufferSize?buffer=design" loadingMessage="Loading..."></span></a></li>
					<li class="idealoop">&darr;<a class="<c:if test='${buffer == "experiment"}'>selected</c:if>" href="/kanbantweet?buffer=experiment">Experiment&nbsp;<span dojoType="dijit.layout.ContentPane" href="/bufferSize?buffer=experiment" loadingMessage="Loading..."></span></a></li>
					<li class="idealoop">&darr;<a class="<c:if test='${buffer == "adjust"}'>selected</c:if>" href="/kanbantweet?buffer=adjust">Adjust&nbsp;<span dojoType="dijit.layout.ContentPane" href="/bufferSize?buffer=adjust" loadingMessage="Loading..."></span></a></li>
		  				
	  				
  				<li><a class="<c:if test='${buffer == "outputqueue"}'>selected</c:if>" href="/kanbantweet?buffer=outputqueue">Output&nbsp;<span dojoType="dijit.layout.ContentPane" href="/bufferSize?buffer=outputqueue" loadingMessage="Loading..."></span></a></li>
  				<li><a class="<c:if test='${buffer == "nottodo"}'>selected</c:if>" href="/kanbantweet?buffer=nottodo">Not To-Do&nbsp;<span dojoType="dijit.layout.ContentPane" href="/bufferSize?buffer=nottodo" loadingMessage="Loading..."></span></a></li>
  			</ul>
  		</div>
  		
  		<div id="footer"><a href="http://bit.ly/FhoFx">by Innovative Thinking</a></div>
  			
  	</div>
  	




  	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.layout.ContentPane");                                    
    </script>
    
	</center>
    
  </body>
</html>
